<template>
    <div v-if="showDialog" class="spring-festival-container">
        <div class="spring-festival-box">
            <div class="festival-bg"></div>
            <div class="close pointer" @click="handleClose">
                <img src="../../assets/closetwo.png" alt="" class="icon-close">
            </div>
            <div class="spring-festivel-content">
                <div class="inner-content">
                    <div class="fc-gray">尊敬的客户，您好！</div>
                    <div class="fc-gray">受中国人民银行支付系统影响，“公对公充值”将在 2024 年春节假期关闭。</div>
                    <div class="fc-pink bold mg-t-10 mg-b-10">关闭时间：02-08 17:15 至 02-18 24:00<span class="mg-l-20">恢复时间：02-19 00:00</span>
                    </div>
                    <div class="fc-pink bold mg-t-10 mg-b-10 set-title">关于发薪</div>
                    <div class="fc-gray">其余时间段与常规状态一致。请提前充值做好工资备款，避免中途账户余额不足。“公对公充值”关闭时间段，法人可以在小程序中使用管理员个人充值。<span class="fc-pink bold">注意：以上时间仅针对于公对公充值，放假期间发薪系统正常运营。</span></div>
                    <div class="fc-pink bold mg-t-10 mg-b-10 set-title">关于保险</div>
                    <div class="flex mg-b-8">
                        <img src="../../assets/festival/icon.png" alt="" class="icon">
                        <div class="fc-black">系统正常操作加减保，日日保投保时间不受影响；</div>
                    </div>
                    <div class="flex mg-b-8">
                        <img src="../../assets/festival/icon.png" alt="" class="icon">
                        <div class="fc-black">为避免影响您的加减保操作，<span class="fc-pink bold">建议您假期前可以多充值部分保费（用不完可以退回）</span>，保证账户余额充足。春节期间服务群将暂停发送余额不足和断保通知。假期充值，微信可以正常充值，对公充值，财务收到款会正常录入</div>
                    </div>
                    <div class="flex mg-b-8">
                        <img src="../../assets/festival/icon.png" alt="" class="icon">
                        <div class="fc-black">系统余额不足自动断保后充值，需要您手动操作人员续保，续保成功后会有一天脱保空档期，请知悉；</div>
                    </div>
                    <div class="flex mg-b-8">
                        <img src="../../assets/festival/icon.png" alt="" class="icon">
                        <div class="fc-black">在线报案功能不受影响，系统都可操作（24小时之内系统操作在线报案）。上班之后理赔老师会第一时间受理。<span class="fc-pink bold">当日案（投保 24 小时内发生的）和涉及有疑义或骨折案件，请及时保存监控视频，以免影响理赔。</span></div>
                    </div>
                    <div class="fc-gray mg-b-8">注意：如有其他问题咨询，请联系您的业务经理或服务群内沟通，都会第一时间给您处理</div>
                    <div class="fc-gray">紧急事务请联系：丁杰西 <span class="bold">183-6103-0666</span></div>
                </div>
            </div>
            <div class="hint-2">子弹人力云全体员工祝您在新的一年里前程似锦 顺心如意！</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: false
        }
    },
    watch: {
        show: {
            handler(newval) {
                this.showDialog = newval
            },
            immediate: true
        },
        showDialog(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            localStorage.setItem('springFestivalClose', true)
            this.showDialog = false
        }
    }
}
</script>
<style lang="stylus" scoped>
.spring-festival-container
    position fixed
    left 0
    top 0
    width 100vw
    height 100vh
    overflow auto
    background rgba(0, 0, 0, 0.7)
    z-index 100
.spring-festival-box
    width 926px
    height 646px
    position absolute
    left 50%
    top 45%
    transform translate(-50%, -50%)
.festival-bg
    width 926px
    height 646px
    background url('../../assets/festival/bg-year.png') no-repeat
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    z-index 100
.spring-festivel-content
    width 834px
    border-radius 24px
    background linear-gradient(180deg, #E8514E 0%, #B62630 100%)
    position absolute
    left 50%
    top 73%
    transform translate(-50%, -50%)
    z-index -1
.hint-2
    color #FEFBEA
    font-size 12px
    text-align center
    position absolute
    bottom -90px
    left 50%
    transform translateX(-50%)
.icon-close
    position absolute
    right 40px
    top 100px
    width 36px
    height 36px
    z-index 100
.inner-content
    width 789px
    // height 4px
    background #FFFCF8
    border-radius 16px
    margin 35px auto
    padding 66px 40px 20px
.fc-gray
    color #3D3D3D
.fc-black
    color #000
.fc-pink
    color #FF5347
.icon
    width 14px
    height 14px
    margin-top 3px
    margin-right 6px
.mg-b-8
    margin-bottom 8px
.set-title
    height 28px
    line-height 28px
    border-radius 14px
    background-color #FF5347
    color #fff
    width 88px
    text-align center
</style>